<template>
  <el-dialog v-model="visible" title="Shipping address" :before-close="()=>close()">
    <el-form :model="form">
       <el-form-item label="Zones">
        <el-select
          v-model="form.selectRoleIds"
          multiple
          style="width: 240px">
          <el-option
            v-for="item in roleLists"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
          </el-select>
        </el-form-item>
    </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="sumbit"
          >确定</el-button>
      </span>
    </template>
   
  </el-dialog>
</template>

<script lang='ts' setup>
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue'
import { umsAdmin , umsRole } from '../../../request/http' 

const value1 = ref([])
const props = withDefaults(
    defineProps<{
      visible: boolean;
      adminId: number;   
    }>(), {
        visible: false,
    }
 )

const roleLists = ref([] as umsRole.RoleDataObj[]);
// 获取所有用户角色
async function fetchRolesData() {
  const roleListsRes = await umsRole.getRoleListAll();
  if (roleListsRes.code === 200) {
    roleLists.value = roleListsRes.data;
  }
}
fetchRolesData();

// 获取当前用户角色列表
async function getRolesListByAdminId() {
  const adminRole = await umsAdmin.getAdminRoleById(props.adminId);
  if (adminRole.code === 200) {
    form.selectRoleIds = adminRole.data.map(item => item.id);
  }
}

watch(
  () => props.visible,
  (val) => {
    if (val) {
      getRolesListByAdminId();
    }
  }
)

const emit = defineEmits<{
    (event: "close"): void;
}>()

const form = reactive({
  selectRoleIds: [] as number[],
})
async function sumbit() {
  const updateAdminRoleRes = await umsAdmin.updateAdminRole({
    adminId: props.adminId,
    roleIds:form.selectRoleIds.join(',')
  })
  if (updateAdminRoleRes.code === 200) {
    close();
    // 提示
    ElMessage({
      message: "提交成功",
      type:"success"
    })
  }
}

function close() {
  // 关闭弹窗
    emit('close')
}
</script>
<style lang='less' scoped>
</style>